<template>
  <div>
    <Title title="出行新增"></Title>
    <el-row>
      <el-col :span="8">
        <el-form
          ref="formRef"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          label-position="top"
          class="myform"
        >
          <el-form-item label="目的地" prop="address">
            <el-input
              clearable
              v-model="form.address"
              placeholder="请填写你的目的地"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <!-- 这个日期选择器挺智能的，较晚的时间会自动排在较早的时间的后面 -->
          <el-form-item label="出行日期" prop="date">
            <el-date-picker
              v-model="form.dates"
              type="daterange"
              unlink-panels
              range-separator="To"
              start-placeholder="出发日期"
              end-placeholder="回家日期"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnblock" @click="submitForm()"
              >提交表单</el-button
            >
            <el-button
              type="danger"
              class="btnblock"
              @click="resetForm(formRef)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { VacTypes, ShowErrorMsg } from "@/utils";
import type { FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { Ajax } from "@/api";
const router = useRouter();
const formRef = ref<FormInstance>();
const value1 = ref();
const form = reactive({
  address: "",
  dates: [], //date是个数组，有两条数据，第一条是起始日期，第二条是结束日期
});
const rules = reactive({
  address: [
    {
      required: true,
      message: "请选择",
      trigger: "blur",
    },
  ],
  dates: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const shortcuts = [
  {
    text: "上一星期",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "上一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "前三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const submitForm = () => {
  console.log(form);
  formRef.value.validate(async (valid: any) => {
    //整个表单校验
    if (valid) {
      let res: any = await Ajax.traadd(form);
      if (res.code == 200) {
        router.push({ name: "health-tra" });
      } else {
        ShowErrorMsg("校验失败");
      }
    }
  });
};
</script>
